<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>{{$route.query.id?'修改':'发布'}}文章</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <el-form ref="articleForm" label-width="120px" :model="articleForm" :rules="articleRules">

        <el-form-item label="标题：" prop="title">
          <el-input v-model="articleForm.title" placeholder="请输入文章标题" style="width:400px"></el-input>
        </el-form-item>

        <el-form-item label="频道：" prop="channel_id">
          <my-channels style="width: 400px" :reqParams="articleForm"></my-channels>
        </el-form-item>

        <el-form-item label="封面：" prop="cover">
          <template>
            <el-radio-group v-model="articleForm.cover.type" @change="changeCoverType()">
              <el-radio :label="1">单图</el-radio>
              <el-radio :label="3">三图</el-radio>
              <el-radio :label="0">无图</el-radio>
              <el-radio :label="-1">自动</el-radio>
            </el-radio-group>
            <!-- 上传组件 -->
            <div v-if="articleForm.cover.type === 1 || articleForm.cover.type === 3">
              <el-upload ref="upload" action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card"
                :limit="articleForm.cover.type" :on-success="uploadSuccess">
                <i class="el-icon-plus"></i>
              </el-upload>
            </div>
          </template>
        </el-form-item>

        <el-form-item label="内容：" prop="content">
          <quill-editor @blur="checkContent" v-model="articleForm.content" :options="editorOption"/>
        </el-form-item>

        <el-form-item label="">
          <el-button @click="onSubmit(false)" type="primary">发布文章</el-button>
          <el-button @click="onSubmit(true)">存入草稿</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import MyChannels from '../../components/my-channels.vue'
import { getArticleInfoAPI } from '@/api/index.js'
export default {
  name: 'publishIndex',
  components: {
    MyChannels,
    quillEditor
  },
  data () {
    const checkCoverFn = (rule, value, callback) => {
      if (value.type === 1) {
        if (!value.images[0]) {
          return callback(new Error('请选择一张封面图'))
        }
      }
      if (value.type === 3) {
        if (!(value.images[0] && value.images[1] && value.images[2])) {
          return callback(new Error('请选择三张封面图'))
        }
      }
      callback()
    }
    return {
      articleForm: {
        title: null,
        content: null,
        cover: {
          type: 1,
          images: []
        },
        channel_id: null
      },

      editorOption: {},
      articleRules: {
        title: [
          { required: true, message: '请输入文章标题', trigger: 'blur' },
          { min: 4, max: 50, message: '文章标题4-50字符', trigger: 'blur' }
        ],
        channel_id: [
          { required: true, message: '请选择文章频道', trigger: 'change' }
        ],
        cover: [
          { validator: checkCoverFn, trigger: 'change' }
        ],
        content: [
          { required: true, message: '请输入文章内容', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 切换上传图片数量按钮时触发的事件
    changeCoverType () {
      this.$refs.upload && this.$refs.upload.clearFiles()
      // 切换类型清空数据
      this.articleForm.cover.images = []
    },
    // 富文本失焦触发的事件
    // 给el-form设置ref，通过$refs.ref值.validateField('content') 判断富文本的状态
    checkContent () {
      this.$refs.articleForm.validateField('content')
    },
    // 上传图片成功
    uploadSuccess (res) {
      // res就是响应数据
      console.log(res)
      this.articleForm.cover.images.push(res)
      // 触发一次校验
      this.$refs.articleForm.validateField('cover')
    },
    // 提交按钮
    onSubmit () {
      this.$refs.articleForm.validate(submit => {
        console.log(submit)
      })
    },
    // 获取文章列表接口
    async loadArticle (id) {
      try {
        const { data: res } = await getArticleInfoAPI(id)
        console.log(res)
        this.articleForm = res.data
        console.log(this.articleForm)
      } catch (error) {
        console.log(error)
      }
    }
  },
  created () {
    if (this.$route.query.id) {
      // 如果有id传过来，说明是从内容管理页跳转过来的，需要进行修改操作
      this.loadArticle(this.$route.query.id)
    }
  }
}
</script>

<style scoped lang="less">
::v-deep .ql-editor {
  min-height: 200px;
}
</style>
